<template>
  <div>
    <el-row class="container">
      <el-col class="topbar-wrap">
        <div class="topbar-logo topbar-btn">
          <a href="/"
            ><img
              src="@/assets/logo.png"
              alt="首页"
              title="首页"
              style="padding-left: 8px"
          /></a>
        </div>
        <div class="topbar-logos">
          <a href="/" style="color: #fff">首页</a>
        </div>
        <div class="topbar-title">
          <el-row>
            <el-col :span="24">
              <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                :router="true"
              >
                <el-menu-item index="/home">主页</el-menu-item>
                <el-submenu index="2">
                  <template slot="title">分类1</template>
                  <el-submenu index="2-1">
                    <template slot="title">分类2</template>
                    <el-menu-item @click="jumpTo('vue')">Vue</el-menu-item>
                    <el-menu-item @click="jumpTo('Jquery')"
                      >Jquery</el-menu-item
                    >
                    <el-menu-item @click="jumpTo('React')">React</el-menu-item>
                  </el-submenu>
                  <el-submenu index="2-2">
                    <template slot="title">分类3</template>
                    <el-menu-item @click="jumpTo('csharp')"
                      >C#/Net</el-menu-item
                    >
                    <el-menu-item @click="jumpTo('Python')"
                      >Python</el-menu-item
                    >
                  </el-submenu>
                  <el-submenu index="2-3">
                    <template slot="title">分类4</template>
                    <el-menu-item @click="jumpTo('Mysql')">Mysql</el-menu-item>
                    <el-menu-item @click="jumpTo('SqlServer')"
                      >SqlServer</el-menu-item
                    >
                  </el-submenu>
                </el-submenu>
                <el-menu-item @click="displayDialog(true)">弹窗1 </el-menu-item>
                <el-menu-item @click="displayDialog1(true)">弹窗2</el-menu-item>
                <el-menu-item index="5"><a href="/" target="">关于</a></el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </div>
        <div class="topbar-account topbar-btn">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link userinfo-inner">
              <i class="iconfont icon-user"></i> {{ nickname }}
              <i class="el-icon-caret-bottom"></i
            ></span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div @click="jumpTo('/user/profile')">
                  <span style="color: #555; font-size: 14px">个人信息</span>
                </div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="jumpTo('/user/changepwd')">
                  <span style="color: #555; font-size: 14px">修改密码</span>
                </div>
              </el-dropdown-item>
              <el-dropdown-item divided @click.native="logout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-col>
    </el-row>
    <vdialog
      :show="showDialog"
      @confirm="confirm"
      @cancel="cancel"
      :showCancel="true"
      :title="'新标题'"
      :confirmText="`知道了`"
      :cancelText="`关闭`"
    >
      <!-- <notice></notice> -->
      <p>哈哈哈哈哈哈哈哈哈哈哈哈</p>
    </vdialog>

    <vdialog
      :show="showDialog1"
      @confirm="confirm1"
      @cancel="cancel1"
      :showCancel="true"
      :title="'新标题'"
      :confirmText="`知道了`"
      :cancelText="`关闭`"
    >

    </vdialog>
  </div>
</template>

<script>
import { road } from "@/road.js";
import vdialog from "@/components/common/dialog";
import notice from "@/components/common/notice";
// import vmarkdown from "@/components/common/markdown";
export default {
  name: "layout-header",
  components: {
    vdialog,
    notice,
    //vmarkdown
  },
  data() {
    return {
      loading: false,
      companyName: "",
      nickname: "dailao",
      activeIndex: "/",
      homeMenu: false,
      messageCount: 5,
      input: null,
      addDialogVisible: false,
      showDialog: false,
      showDialog1: false,
    };
  },
  created() {
    road.$on("setNickName", (text) => {
      this.nickname = text;
    });

    road.$on("goto", (url) => {
      if (url === "/login") {
        localStorage.removeItem("access-user");
        this.$router.push(url);
      }
    });
    // 组件创建完后获取数据
    this.fetchNavData();
  },
  methods: {
    jumpTo(keyWord) {
<<<<<<< HEAD
      this.$router.replace({
        name:'/xarticle/list',
        query : { keyWord : keyWord} 
=======
      // console.log(keyWord);
      this.$router.push({
        name: "/xarticle/list",
        query: { keyWord: keyWord },
>>>>>>> d92912b9f09b860b367fada5e5fe173403016da7
      });
      //用go刷新
    },
    handleSelect(index) {
      this.activeIndex = index;
    },
    fetchNavData() {
      // 初始化菜单激活项
      let cur_path = this.$route.path; //获取当前路由
      let routers = this.$router.options.routes; // 获取路由对象
      let nav_type = "",
        nav_name = "";
      for (var i = 0; i < routers.length; i++) {
        let children = routers[i].children;
        if (children) {
          for (let j = 0; j < children.length; j++) {
            if (children[j].path === cur_path) {
              nav_type = routers[i].type;
              nav_name = routers[i].name;
              break;
            }
            // 如果该菜单下还有子菜单
            if (children[j].children) {
              let grandChildren = children[j].children;
              for (let z = 0; z < grandChildren.length; z++) {
                if (grandChildren[z].path === cur_path) {
                  nav_type = routers[i].type;
                  nav_name = routers[i].name;
                  break;
                }
              }
            }
          }
        }
      }
      this.$store.state.topNavState = nav_type;
      this.$store.state.leftNavState = nav_name;
      if (nav_type == "home") {
        this.activeIndex = "/";
      } else {
        this.activeIndex = "/" + nav_name + "Manager";
      }
    },
    logout() {
      //logout
      this.$confirm("确认退出吗?", "提示", {
        confirmButtonClass: "el-button--warning",
      })
        .then(() => {
          //确认
          localStorage.removeItem("access-user");
          road.$emit("goto", "/login");
        })
        .catch(() => {});
    },
    displayDialog(show) {
      this.showDialog = show;
    },
    cancel(show) {
      console.log(show);
      this.showDialog = show;
    },
    confirm(show) {
      console.log(show);
      this.showDialog = show;
    },
     displayDialog1(show) {
      this.showDialog1 = show;
    },
    cancel1(show) {
      console.log(show);
      this.showDialog1 = show;
    },
    confirm1(show) {
      console.log(show);
      this.showDialog1 = show;
    },
  },
  mounted() {
    let user = window.localStorage.getItem("access-user");
    if (user) {
      user = JSON.parse(user);
      this.nickname = user.nickname || "";
      this.companyName = user.companyName || "";
    }
  },
  watch: {
    // $route: function (to, from) {
    //   // 路由改变时执行
    //   console.info("to");
    //   console.info(to);
    //   console.info("from：");
    //   console.info(from);
    //   this.fetchNavData();
    // },
    $route: function () {
      this.fetchNavData();
    },
  },
};
</script>

<style scoped>
</style>